<template>
	<div class="register">
		<!-- 标题1 -->
		<div class="title_box">
			<img src="~img/marketingExtension/title-icon.svg" />
			<div>客户基础信息</div>
		</div>
		<van-cell title="客户名称" required>
			<div slot="right-icon">
				<input placeholder="请输入客户名称" v-model="form.corpName" @input="changeValue" />
				<!-- 下拉搜索框 -->
				<div class="search-body" v-show="showSearch">
					<div
						v-for="(item, index) in bossList"
						:key="index"
						class="search-item"
						v-html="item.viewName"
						@click="selectOne(item)"
					></div>
				</div>
			</div>
		</van-cell>
		<van-cell title="统一信用代码">
			<div slot="right-icon">
				<input placeholder="请输入统一信用代码" v-model="form.corpCredit" />
			</div>
		</van-cell>
		<van-cell title="客户号">
			<div slot="right-icon">
				<input placeholder="请输入客户号" v-model="form.customerNo" />
			</div>
		</van-cell>
		<van-cell title="客户地址">
			<div slot="right-icon">
				<input placeholder="请输入客户地址" v-model="form.area" />
			</div>
		</van-cell>
		<!-- 标题2 -->
		<div class="title_box">
			<img src="~img/marketingExtension/title-icon.svg" />
			<div>对接事项</div>
		</div>
		<van-cell title="对接人（客户）">
			<div slot="right-icon">
				<input type="text" placeholder="请输入姓名" v-model="form.meetName" />
			</div>
		</van-cell>
		<van-cell title="职务">
			<div slot="right-icon">
				<input type="text" placeholder="请输入职务" v-model="form.meetDuty" />
			</div>
		</van-cell>
		<van-cell title="对接事项" required>
			<div @click="showPicker1 = true" slot="right-icon" class="select-right">
				<div>{{ meetItemsName === '' ? '请选择' : meetItemsName }}</div>
				<van-icon name="arrow" />
			</div>
		</van-cell>
		<van-cell title="是否为烟商客户" required>
			<div slot="right-icon">
				<van-radio-group v-model="form.isTobacconist" direction="horizontal">
					<van-radio name="是">是</van-radio>
					<van-radio name="否">否</van-radio>
				</van-radio-group>
			</div>
		</van-cell>
		<van-cell title="对接内容" required>
			<div @click="showPicker2 = true" slot="right-icon" class="select-right">
				<div>{{ meetDetailsName === '' ? '请选择' : meetDetailsName }}</div>
				<van-icon name="arrow" />
			</div>
		</van-cell>
		<div v-if="form.meetDetails === '2'">
			<van-cell title="批复金额" required>
				<div class="select-right" slot="right-icon">
					<input
						type="number"
						placeholder="0.00"
						v-model="form.approvalMoney"
						inputmode="numeric"
						pattern="[0-9]*"
					/>
					<div style="width: 40px; margin-left: 6px; font-size: 15px; color: #2c2c2c">万元</div>
				</div>
			</van-cell>
			<van-cell title="授信余额" required>
				<div class="select-right" slot="right-icon">
					<input
						type="number"
						placeholder="0.00"
						v-model="form.creditMoney"
						inputmode="numeric"
						pattern="[0-9]*"
					/>
					<div style="width: 40px; margin-left: 6px; font-size: 15px; color: #2c2c2c">万元</div>
				</div>
			</van-cell>
			<van-cell title="预计提款时间" required>
				<div class="select-right" @click="showPicker3 = true" slot="right-icon">
					<img src="https://zx-1311146360.cos.ap-shanghai.myqcloud.com/qiyezoufangdetail/2.png" />
					<div>{{ form.planTime || '请选择' }}</div>
					<van-icon name="arrow" />
				</div>
			</van-cell>
			<van-cell title="预计提款金额" required>
				<div class="select-right" slot="right-icon">
					<input
						type="number"
						placeholder="0.00"
						v-model="form.planMoney"
						inputmode="numeric"
						pattern="[0-9]*"
					/>
					<div style="width: 40px; margin-left: 6px; font-size: 15px; color: #2c2c2c">万元</div>
				</div>
			</van-cell>
		</div>
		<!-- 标题3 -->
		<div class="title_box">
			<img src="~img/marketingExtension/title-icon.svg" />
			<div>营销登记</div>
		</div>
		<van-cell title="陪同营销人员">
			<div slot="right-icon">
				<input type="text" placeholder="请输入姓名" v-model="form.accompanyPerson" />
			</div>
		</van-cell>
		<van-cell title="营销内容" required>
			<div slot="right-icon">
				<input type="text" placeholder="请输入营销内容" v-model="form.salesDetails" />
			</div>
		</van-cell>
		<van-cell title="营销成果">
			<div slot="right-icon">
				<input type="text" placeholder="请输入营销成果" v-model="form.salesAchievemENT" />
			</div>
		</van-cell>
		<van-cell title="是否成功营销提款" required>
			<div slot="right-icon">
				<van-radio-group
					v-model="form.isMarketDrawMoney"
					direction="horizontal"
					@change="isMarketDrawMoneyChange"
				>
					<van-radio name="0">是</van-radio>
					<van-radio name="1">否</van-radio>
				</van-radio-group>
			</div>
		</van-cell>
		<van-cell v-if="form.isMarketDrawMoney == '0'" title="营销提款金额" required>
			<div class="adddiv_box" slot="right-icon">
				<input
					type="text"
					placeholder="0.00"
					v-model="form.marketDrawMoney"
					inputmode="numeric"
					pattern="[0-9]*"
				/>
				<div style="width: 40px; margin-left: 6px; font-size: 15px; color: #2c2c2c">万元</div>
			</div>
		</van-cell>
		<div class="title_box" v-if="form.recordId">
			<img src="~img/marketingExtension/title-icon.svg" />
			<div>打卡记录</div>
		</div>
		<van-cell
			title="打卡时间"
			:value="item.time"
			:label="item.location"
			v-for="(item, index) in form.clockInVO"
			:key="index"
		/>
		<!-- <van-cell-group inset>
    <van-cell title="打卡时间" v-model="item.time" :label="item.location" v-for="(item, index) in form.clockInVO" :key="index" />
  </van-cell-group> -->
		<div style="width: 80%; margin: 0px auto; padding: 15px 0">
			<van-button type="info" @click="commitClick" block>提交</van-button>
		</div>
		<!-- 选择器1 -->
		<van-popup v-model="showPicker1" round position="bottom">
			<van-picker
				show-toolbar
				:columns="columns1"
				@cancel="showPicker1 = false"
				@confirm="onConfirmPicker1"
			/>
		</van-popup>
		<!-- 选择器2 -->
		<van-popup v-model="showPicker2" round position="bottom">
			<van-picker
				show-toolbar
				:columns="columns2"
				@cancel="showPicker2 = false"
				@confirm="onConfirmPicker2"
			/>
		</van-popup>
		<!-- 选择器3 -->
		<van-popup v-model="showPicker3" round position="bottom">
			<van-datetime-picker type="date" title="选择年月日" @confirm="onConfirmPicker3" />
		</van-popup>
	</div>
</template>
<script>
	import { getCorpNames } from '@/interfaces/mini';
	import { saveSalesRegister, getSaleLedger } from '@/interfaces/marketingExtension';
	export default {
		name: 'list',
		/*1. Vue扩展 */
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: {},
		/* 2. Vue数据 */
		props: {},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {
				showSearch: false,
				bossList: [],
				showPicker1: false,
				showPicker2: false,
				showPicker3: false,
				columns1: ['陌生拜访', '日常维护', '授信营销', '贷后维护', '其他事项'],
				columns2: ['新客户', '已批未提', '其他'],
				meetItemsName: '陌生拜访',
				meetDetailsName: '新客户',
				form: {
					// 客户基础信息
					corpName: '', //企业名称
					corpCredit: '', //统一信用代码
					customerNo: '', //客户号
					area: '', //客户地址
					// 对接事项
					meetName: '', //对接人
					meetDuty: '', //职务
					meetItems: '1', //对接事项
					isTobacconist: '否', // 是否为烟商客户
					meetDetails: '1', //对接内容
					// 4个受控制的字段
					approvalMoney: '', //批复金额
					creditMoney: '', //授信余额
					planTime: '', //计划提款时间
					planMoney: '', // 预计提款金额
					// 营销登记
					accompanyPerson: '', // 陪同营销人员
					salesDetails: '', //营销内容
					salesAchievemENT: '', //营销成果
					isMarketDrawMoney: '1', // 是否成功营销提款（0是 1否）
					marketDrawMoney: '', // 营销提款金额
					recordId: '', // 记录id
				},
			};
		},
		computed: {},
		watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
		/* 3. Vue资源 */
		filters: {},
		directives: {},
		/* 4. Vue生命周期 */
		created() {
			this.form.recordId = this.$route.query.recordId || '';
			if (this.form.recordId) {
				// 查询详情
				this.getDetails();
			}
		},
		mounted() {},
		destroy() {},
		/* 5. Vue方法 */
		methods: {
			async getDetails() {
				const params = {
					recordId: this.form.recordId,
				};
				const res = await getSaleLedger(params);
				console.log(res, 'res');
				this.form.corpName = res.data.corpName; //企业名称
				this.form.corpCredit = res.data.corpCredit; //统一信用代码
				this.form.customerNo = res.data.customerNo; //客户号
				this.form.area = res.data.area; //客户地址
				// 对接事项
				this.form.meetName = res.data.meetName; //对接人
				this.form.meetDuty = res.data.meetDuty; //职务
				// this.form.meetItems = res.data.meetItems; //对接事项
				this.form.isTobacconist = res.data.isTobacconist; // 是否为烟商客户
				// this.form.meetDetails = res.data.meetDetails; //对接内容
				// 4个受控制的字段
				this.form.approvalMoney = res.data.approvalMoney; //批复金额
				this.form.creditMoney = res.data.creditMoney; //授信余额
				this.form.planTime = res.data.planTime; //计划提款时间
				this.form.planMoney = res.data.planMoney; // 预计提款金额
				// 营销登记
				this.form.accompanyPerson = res.data.accompanyPerson; // 陪同营销人员
				this.form.salesDetails = res.data.salesDetails; //营销内容
				this.form.salesAchievemENT = res.data.salesAchievement; //营销成果
				this.form.isMarketDrawMoney = res.data.isMarketDrawMoney == '否' ? '1' : '0'; // 是否成功营销提款（0是 1否）
				this.form.marketDrawMoney = res.data.marketDrawMoney; // 营销提款金额
				// 选择框
				this.meetItemsName = res.data.label.name; //对接事项
				this.meetDetailsName = res.data.meetDetail; //对接内容 
				this.onConfirmPicker1(this.meetItemsName);
				this.onConfirmPicker2(this.meetDetailsName);
			},
			isMarketDrawMoneyChange() {
				// console.log(this.form.isMarketDrawMoney, 'this.form.isMarketDrawMoney')
				if (this.form.isMarketDrawMoney === '1') {
					this.form.marketDrawMoney = '';
				}
			},
			async commitClick() {
				console.log(JSON.parse(JSON.stringify(this.form)), 'form');
				// 必填项字段
				let requireList = [
					'corpName',
					'meetItems',
					'isTobacconist',
					'meetDetails',
					'salesDetails',
					'isMarketDrawMoney',
				];
				// 特殊情况
				if (this.form.meetDetails === '2') {
					requireList = requireList.concat([
						'approvalMoney',
						'creditMoney',
						'planTime',
						'planMoney',
					]);
				}
				if (this.form.isMarketDrawMoney === '0') {
					requireList = requireList.concat(['marketDrawMoney']);
				}
				console.log(requireList, 'requireList');
				// 校验必填
				const hasEmpty = requireList.some((val) => this.form[val] === '');
				if (hasEmpty) {
					this.$toast('请将带*的内容填写完整');
					return;
				}
				// 提交数据
				const res = await saveSalesRegister(this.form);
				console.log(res, 'res');
				if (res.code == 200) {
					this.$toast.success('提交成功');
					setTimeout(() => {
						this.$router.go(-1);
					}, 1000);
				}
			},
			onConfirmPicker1(value) {
				switch (value) {
					case '陌生拜访':
						this.form.meetItems = '1';
						break;
					case '日常维护':
						this.form.meetItems = '2';
						break;
					case '授信营销':
						this.form.meetItems = '3';
						break;
					case '贷后维护':
						this.form.meetItems = '4';
						break;
					case '其他事项':
						this.form.meetItems = '5';
						break;
					default:
						break;
				}
				this.meetItemsName = value;
				this.showPicker1 = false;
			},
			onConfirmPicker2(value) {
				switch (value) {
					case '新客户':
						this.form.meetDetails = '1';
						break;
					case '已批未提':
						this.form.meetDetails = '2';
						break;
					case '其他':
						this.form.meetDetails = '3';
						break;
					default:
						break;
				}
				if (this.form.meetDetails !== '2') {
					this.form.approvalMoney = ''; //批复金额
					this.form.creditMoney = ''; //授信余额
					this.form.planTime = ''; //计划提款时间
					this.form.planMoney = ''; // 预计提款金额
				}
				this.meetDetailsName = value;
				this.showPicker2 = false;
			},
			onConfirmPicker3(value) {
				this.form.planTime = this.$dayjs(value).format('YYYY-MM-DD');
				this.showPicker3 = false;
				// console.log(this.$dayjs(value).format('YYYY-MM-DD'), 'value')
			},
			changeValue() {
				this.form.corpCredit = '';
				// 代码实现
				if (this.form.corpName.length > 3) {
					this.timer = new Date().getTime();
					this.getBossList(this.timer);
				} else {
					this.showSearch = false;
				}
			},
			async getBossList(timer) {
				console.log(timer, 'timer');
				// this.showSearch = true
				const params = {
					corpName: this.form.corpName,
				};
				console.log(params, 'params');
				const res = await getCorpNames(params);
				console.log(res, '搜索的企业列表');
				if (this.timer === timer) {
					if (res.data.length > 0) {
						// if (res.data.length === 1) {
						//   this.form.corpName = res.data[0].corpName
						//   this.form.corpCredit = res.data[0].corpCredit
						// } else {
						res.data.forEach((ped) => {
							ped.viewName = this.deal(ped.corpName);
						});
						this.showSearch = true;
						this.bossList = res.data;
						// }
						// console.log(this.bossList, 'bossList')
					} else {
						this.showSearch = false;
					}
				}
			},
			selectOne(item) {
				this.form.corpName = item.corpName;
				this.form.corpCredit = item.corpCredit;
				this.showSearch = false;
			},
			deal(val) {
				if (this.form.corpName) {
					return val.replace(
						this.form.corpName,
						"<font style='color:#fd485e;'>" + this.form.corpName + '</font>'
					);
				} else {
					return val;
				}
			},
		}, // all the methods should be put here in the last
	};
</script>
<style scoped lang="scss">
	.register {
		position: relative;
		.title_box {
			background: #eff6ff;
			padding: 8px 18px;
			font-size: 28px;
			color: #2c2c2c;
			display: flex;
			align-items: center;
			& > div {
				font-size: 14px;
				font-family: Source Han Sans SC;
				font-weight: bold;
				color: #2c2c2c;
			}
			img {
				width: 8px;
				height: 16px;
				margin-right: 5px;
			}
		}
		.search-body {
			position: absolute;
			top: 42px;
			right: 10px;
			width: 240px;
			height: 200px;
			// border: 1px solid red;
			background: #fff;
			z-index: 100;
			box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
			overflow-y: auto;
			.search-item {
				margin: 4px 0 0 8px;
				font-size: 12px;
				font-family: Alibaba PuHuiTi;
				color: #999999;
			}
		}

		// /deep/.van-cell {
		// 	padding-top: 10px !important;
		// 	padding-bottom: 10px !important;
		// }
		.addView_box {
			display: flex;
			align-items: center;
		}
		.addView_box_time img {
			width: 12px;
			margin-right: 5px;
		}
		.define_down_drop {
			width: 250px;
			height: 250px;
			border: 1px solid #ccc;
			position: absolute;
			top: 90px;
			right: 3%;
			z-index: 100;
			background-color: #fff;
			border-radius: 4px;
			padding: 15px 0;
			z-index: 1000;
		}

		.define_down_drop_box {
			height: 100%;
			overflow-y: scroll;
		}

		.define_down_drop_item {
			font-size: 12px;
			/* background-color: red; */
			padding: 10px 15px;
		}

		.define_down_drop_item:hover {
			background-color: #f5f5f5 !important;
		}

		.define_down_drop::before {
			display: block;
			content: '';
			width: 8px;
			height: 8px;
			position: absolute;
			left: 175px;
			top: -4px;
			background-color: white;
			border: 1px solid #ccc;
			border-bottom: none;
			border-right: none;
			z-index: 80;
			transform: rotate(45deg);
		}

		input {
			background: none;
			outline: none;
			border: none;
			text-align: right;
		}
		input:focus {
			border: none;
		}
		.select-right {
			display: flex;
			align-items: center;
			img {
				width: 16px;
				height: 16px;
				margin-right: 5px;
				margin-bottom: 2px;
			}
		}
		.adddiv_box {
			display: flex;
		}
	}
</style>
